<template>
  <div class="container">
    <div class="main">
      <!-- 头部 -->
      <el-row :gutter="20">
        <el-col :span="4"
          ><el-input v-model="input" placeholder="请输入内容"></el-input
        ></el-col>
        <el-col :span="2"><el-button>清空</el-button></el-col>
        <el-col :span="15"><el-button type="primary">搜索</el-button></el-col>
        <el-col :span="2"
          ><el-button type="success" class="el-icon-edit"
            >新增用户</el-button
          ></el-col
        >
      </el-row>
      <!-- 分隔线 -->
      <div class="separate">
        <p><span class="el-icon-info"></span> 共{{ total }}条记录</p>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="180"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: '',
      tableData: [
        {
          id: '2'
        }
      ],
      total: 2
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 20px;
  .main {
    padding: 20px;
    background-color: #fff;
  }
  .separate {
    margin: 20px 0;
    width: 100%;
    height: 30px;
    background-color: #ccc;
    padding-left: 15px;
    border-radius: 5px;
    p {
      font-size: 18px;
      line-height: 30px;
    }
  }
}
</style>
